<template>
  <div>
    <div @keydown.enter="getList" class="search">
      <el-form :inline="true" :model="searchData" @submit.native.prevent>
        <el-form-item label="关键词">
          <el-input v-model="searchData.keyword" placeholder="关键词(标题)" clearable />
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" icon="el-icon-search" size="small"
            @click="getList">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table v-loading="listLoading" :data="list" fit>
      <el-table-column label="时间" prop="createTime" width="220" align="center" />
      <el-table-column label="操作人" prop="operatorName" align="center" />
      <el-table-column label="操作" prop="title" align="center" />
      <el-table-column label="IP" prop="ip" align="center" />
      <el-table-column label="接口" prop="api" align="center" />
      <el-table-column label="备注" prop="note" align="center">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.note" placement="top-start">
            <div>{{scope.row.noteOmit}}</div>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @current-change="currentChange" :page-size="searchData.pageSize" :total="totalCount"
      style="float: right; margin-top: 10px;" background layout="prev, pager, next">
    </el-pagination>
    <div class="clearboth"></div>
  </div>
</template>

<script>
let that
export default {
  data() {
    return {
      searchData: {
        pageIndex: 1,
        pageSize: 20,
      },
      list: [],
      listRole: [],
      listLoading: false,
      totalCount: 0,
      dialogVisible: false,
      form: {},
    }
  },
  created() {
    that = this
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      this.$system
        .get('Log/getOperation', that.searchData)
        .then((res) => {
          that.list = res.list
          this.list.forEach((s) => {
            (s.ip = (s.ip && s.region) ? `${s.ip}(${s.region})` : s.ip), 
            (s.noteOmit = this.$format.omit(s.note, 20))
          })
          that.totalCount = res.totalCount
        })
        .catch()
        .finally(() => {
          this.listLoading = false
        })
    },
    btnShowForm(item) {
      that.dialogVisible = true
      that.form = item
    },
    currentChange(val) {
      this.searchData.pageIndex = val
      this.getList()
    },
  },
}
</script>